<template>
  <div id="home">
    <div class="home_action">
      <el-button type="primary" @click="tapCustomModel"
        >自定义v-model封装</el-button
      >
      <el-button type="primary" @click="tapSlot">插槽</el-button>
      <el-button type="primary" @click="tapdrag">拖拽</el-button>
      <el-button type="primary" @click="tapScrollLoad">滚动加载</el-button>
      <el-button type="primary" @click="tapSwiper">轮播图</el-button>
      <el-button type="primary" @click="tapSplitPane">面板分割</el-button>
      <el-button type="primary" @click="tapDynamicAnchor">动态描点</el-button>
      <el-button type="primary" @click="tapSwipeAction"
        >右滑模块加载更多</el-button
      >
      <el-button type="primary" @click="tapCustomSort">自定义排序</el-button>
      <el-button type="primary" @click="tapLocalForage"
        >localForage存储</el-button
      >
      <el-button type="primary" @click="$router.push('/table')"
        >table表格</el-button
      >
      <el-button type="primary" @click="$router.push('/watermark')"
        >水印</el-button
      >
      <el-button type="primary" @click="$router.push({ name: 'Ceshi' })"
        >测试功能</el-button
      >
      <el-button type="primary" @click="$router.push({ name: 'Grid' })"
        >grid布局</el-button
      >
      <el-button type="primary" @click="$router.push({ name: 'ExportPdf' })"
        >pdf导出</el-button
      >
      <el-button type="primary" @click="$router.push({ name: 'Regular' })"
        >正则表达式</el-button
      >
      <el-button type="primary" @click="$router.push('/studyKeepAlive')"
        >学习keepAlive</el-button
      >
      <el-button type="primary" @click="$router.push('/previewFile')">预览文件夹</el-button>
      <el-button type="primary" @click="$router.push('/imageEditor')">编辑图片</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Home',
  data() {
    return {}
  },
  methods: {
    tapCustomModel() {
      this.$router.push({ name: 'CustomModel' })
    },
    tapSlot() {
      this.$router.push({ name: 'SlotDemo' })
    },
    tapdrag() {
      this.$router.push({ name: 'Drag' })
    },
    tapScrollLoad() {
      this.$router.push({ name: 'ScrollLoad' })
    },
    tapSwiper() {
      this.$router.push({ name: 'Swiper' })
    },
    tapSplitPane() {
      this.$router.push('/splitPane')
    },
    tapDynamicAnchor() {
      this.$router.push({ name: 'DynamicAnchor' })
    },
    tapSwipeAction() {
      this.$router.push({ name: 'SwipeAction' })
    },
    tapCustomSort() {
      this.$router.push({ name: 'CustomSort' })
    },
    tapLocalForage() {
      this.$router.push({ name: 'LocalForage' })
    },
  },
}
</script>
<style lang="less" scoped>
.home_action {
  display: grid;
  padding: 10px;
  grid-template-columns: repeat(auto-fill, 200px);
  gap: 10px;
}
::v-deep {
  .el-button {
    width: 100%;
  }
  .el-button + .el-button {
    margin-left: 0px;
  }
}
</style>
